<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge,chrome=1">
    <meta name="author" content="姚德秋">
    <title></title>
    <style>
    nav{
        width: 800px;
        margin: 100px auto;
        /* height: 50px; */
        display: flex;
        justify-content: space-around;
    }
    .div1{
        width: 150px;
        height: 50px;
        border: 1px solid black;
        text-align: center;
        line-height: 50px;
        position: relative; 
    }
    .div1>section{
        position: absolute;
        width: 200px;
        height: 50px;
        background-color: lightblue;
        border: 1px solid red;
        display: none;
    }
    nav div{
        border: 1px solid black;
    }
    button{
        width: 120px;
        height: 40px;
        background-color: blue;
        color: yellow;
        position: absolute;
        top: 300px;
        display: none;
    }
    </style>
</head>
<body>
     <nav>
         <button type="text">打白条</button>
         <div><div class="div1">不分期
             <section>
                 无手续费
             </section>
         </div></div>
         <div><div class="div1">￥845.5*3期
             <section>
                 含手续费#####
             </section>
         </div></div>
         <div><div class="div1">￥429*6期
              <section>
                 含手续费#####
             </section>
         </div> </div>
         <div><div class="div1">￥220.75*12期
              <section>
                 含手续费#####
             </section>
         </div></div>
         <div><div class="div1">￥116.62*24期
              <section>
                 含手续费#####
             </section>
         </div> </div>
     </nav>
    <script src="./jquery.js"></script>
</body>
</html>
<script>
    $(' .div1').hover(function(){
        $(this).css({'border-color':'blue','border-bottom-style':'none'}).children()
        .css('display','block').parent().siblings().
        css({'border-color':'black','border-bottom-style':'solid'}).children()
        .css('display','none');   
    },function(){
        $(this).css('border-bottom-style','solid').css('border-color','black')
        .children().css('display','none');
    })
    $('div').click(function(){
        $(this).css('border-color','blue').siblings().css('border-color','black').parent().children('button')
        .css('display','block');
    })
</script>